<template>
  <el-row>
    <el-col :span="3">Nodes</el-col>
    <el-col :span="3">{{ filterTableData.length }} Items</el-col>
    <el-col :span="6">
      <el-input
        v-model="queryString"
        placeholder="查询内容"
        name="queryString"
        clearable
        @keyup.enter.native="queryNodes"
      ></el-input>
    </el-col>
    <el-col :span="2"><el-button @click.native="exportReport" >export</el-button></el-col>
  </el-row>
  <el-row>
    <el-table :data="filterTableData" border style="width: 100%" v-loading="loading">
      <el-table-column prop="metadata.name" label="name" width="150" sortable>
        <template #default="scope">
          <a
            style="cursor: pointer; color: red"
            @click.native="openItemAsYaml(scope.row, 'Node')"
            >{{ scope.row.metadata.name }}</a
          >
        </template>
      </el-table-column>
      <el-table-column prop="status.allocatable.cpu" label="cpu" width="120" sortable>
        <template #default="scope">
          {{ to_cpu_h(scope.row.status.allocatable.cpu) }}
        </template>
      </el-table-column>
      <el-table-column prop="usage.cpu" label="usage.cpu" width="120" sortable>
        <template #default="scope">
          {{ scope.row.usage ? to_cpu_h(scope.row.usage.cpu) : "" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="status.allocatable.memory"
        label="memory(G)"
        width="120"
        sortable
        ><template #default="scope">
          {{ to_memory_g(scope.row.status.allocatable.memory) }}
        </template></el-table-column
      >
      <el-table-column prop="usage.memory" label="usage.memory(G)" width="120" sortable>
        <template #default="scope">
          {{ scope.row.usage ? to_memory_g(scope.row.usage.memory) : "" }}
        </template>
      </el-table-column>

      <el-table-column
        prop="status.capacity.ephemeral-storage"
        label="disk(G)"
        width="120"
        sortable
      >
        <template #default="scope">
          {{ to_memory_g(scope.row.status.capacity["ephemeral-storage"]) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="status.nodeInfo.kubeletVersion"
        label="version"
        width="120"
        sortable
      />
      <el-table-column label="age" width="120" sortable prop="metadata.creationTimestamp">
        <template #default="scope">{{
          to_age(scope.row.metadata.creationTimestamp)
        }}</template>
      </el-table-column>

      <el-table-column label="limits.cpu" width="120">
        <template #default="scope">{{
          scope.row.nodePodStatic ? scope.row.nodePodStatic.limits.cpu.toFixed(2) : ""
        }}</template>
      </el-table-column>
      <el-table-column label="requests.cpu" width="120">
        <template #default="scope"
          >{{
            scope.row.nodePodStatic ? scope.row.nodePodStatic.requests.cpu.toFixed(2) : ""
          }}
          ({{
            (
              ((scope.row.nodePodStatic
                ? scope.row.nodePodStatic.requests.cpu.toFixed(2)
                : 0) /
                Number(to_cpu_h(scope.row.status.allocatable.cpu))) *
              100
            ).toFixed(2)
          }}%)
        </template>
      </el-table-column>
      <el-table-column label="limits.memory" width="120">
        <template #default="scope">{{
          scope.row.nodePodStatic ? scope.row.nodePodStatic.limits.memory.toFixed(2) : ""
        }}</template>
      </el-table-column>
      <el-table-column label="requests.memory" width="120">
        <template #default="scope"
          >{{
            scope.row.nodePodStatic
              ? scope.row.nodePodStatic.requests.memory.toFixed(2)
              : ""
          }}

          ({{
            (
              ((scope.row.nodePodStatic
                ? scope.row.nodePodStatic.requests.memory.toFixed(2)
                : 0) /
                Number(to_memory_g(scope.row.status.allocatable.memory))) *
              100
            ).toFixed(2)
          }}%)
        </template>
      </el-table-column>

      <el-table-column label="roles" width="120">
        <template #default="scope">{{ to_roles(scope.row.metadata.labels) }}</template>
      </el-table-column>
      <el-table-column label="taints" width="120">
        <template #default="scope">{{ to_taints(scope.row.spec.taints) }}</template>
      </el-table-column>
    </el-table>
  </el-row>

  <div class="mydialog">
    <el-dialog v-model="yamlVisible" :fullscreen="true">
      <el-tabs type="border-card">
        <el-tab-pane label="Yaml">
          <YamlEdit ref="yamlEdit"></YamlEdit>
        </el-tab-pane>
        <el-tab-pane label="Info">Info</el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import { TableMixins } from "@/mixins/TableMixins";

export default {
  name: "NodeList",
  props: {},
  mixins: [TableMixins],

  computed: {
    filterTableData() {
      var result = this.tableData.filter((t) =>
        t.metadata.name.includes(this.queryString)
      );

      if (this.nodeStates) {
        result = result.map((t) => {
          if (this.nodeStates[t.metadata.name]) {
            t.usage = this.nodeStates[t.metadata.name].usage;
          }
          return t;
        });
      }
      if (this.pods && this.pods.length > 0) {
        this.nodePodStatic = {};

        this.pods.forEach((pod) => {
          let nodeName = pod.spec.nodeName;

          if (!this.nodePodStatic[nodeName]) {
            this.nodePodStatic[nodeName] = {
              requests: {
                cpu: 0,
                memory: 0,
              },
              limits: {
                cpu: 0,
                memory: 0,
              },
            };
          }
          pod.spec.containers.forEach((container) => {
            if (container.resources && container.resources.requests) {
              this.nodePodStatic[nodeName].requests.cpu =
                this.nodePodStatic[nodeName].requests.cpu +
                Number(this.to_cpu_h(container.resources.requests.cpu));
              this.nodePodStatic[nodeName].requests.memory =
                this.nodePodStatic[nodeName].requests.memory +
                Number(this.to_memory_g(container.resources.requests.memory));
            }
            if (container.resources && container.resources.limits) {
              this.nodePodStatic[nodeName].limits.cpu =
                this.nodePodStatic[nodeName].limits.cpu +
                Number(this.to_cpu_h(container.resources.limits.cpu));
              this.nodePodStatic[nodeName].limits.memory =
                this.nodePodStatic[nodeName].limits.memory +
                Number(this.to_memory_g(container.resources.limits.memory));
            }
          });
        });
      }

      result = result.map((t) => {
        if (this.nodePodStatic[t.metadata.name]) {
          t.nodePodStatic = this.nodePodStatic[t.metadata.name];
        }
        return t;
      });

      return result;
    },
  },
  data() {
    return {
      tableData: [],
      nodeStates: {}, //监控指标
      loading: false,
      queryString: "",
      yamlVisible: false,
      pods: [],
      nodePodStatic: {},
    };
  },
  async mounted() {
    this.queryNodes();
  },
  methods: {
    async queryNodes() {
      this.loading = true;
      window.k8s_GetNodes().then((response) => {
        this.tableData = response.items;
        this.loading = false;
      });

      window.k8s_GetNodeMetrics().then((response) => {
        //console.log(response)
        this.nodeStates = response;
      });
      window.k8s_GetPods("").then((response) => {
        //console.log(response)
        this.pods = response.items;
      });
    },

    //节点角色
    to_roles(labels) {
      var roles = [];
      //console.log(labels)
      for (var label in labels) {
        if (label.startsWith("node-role.kubernetes.io/")) {
          roles.push(label.replace("node-role.kubernetes.io/", ""));
        }
      }
      return roles.join(",");
    },
    //是否打污点
    to_taints(taints) {
      return taints && taints.length > 0 ? 1 : 0;
    },
    async exportReport(){

      await window.k8s_ExportNodeReports()
    },
  },
};
</script>
<style scoped>
/*弹出框高度样式调整*/
.mydialog :deep() .el-dialog__body {
  overflow: auto;
  height: 80vh;
}

.mydialog :deep() .el-tabs--border-card {
  height: 70vh;
}
.mydialog :deep() .el-tabs__content {
  height: 70vh;
}
.mydialog :deep() .el-tabs__content .el-tab-pane {
  height: 70vh;
}
</style>
